import {useModel} from '@umijs/max';
import {Card, theme} from 'antd';
import React, {useState} from 'react';
import LearnMore from "@/pages/New/components/projectOverview/learnMore";

/**
 * 每个单独的卡片，为了复用样式抽成了组件
 * @param param0
 * @returns
 */
const InfoCard: React.FC<{
  key: string
  index: string;
  project: Project
}> = ({key, index, project}) => {
  const {useToken} = theme;

  const {token} = useToken();

  return (

    <div
      style={{
        backgroundColor: token.colorBgContainer,
        boxShadow: token.boxShadow,
        borderRadius: '8px',
        fontSize: '14px',
        color: token.colorTextSecondary,
        lineHeight: '16px',
        padding: '14px 19px',
        minWidth: '220px',
        flex: 1,
      }}
    >
      <div
        style={{
          display: 'flex',
          gap: '4px',
          alignItems: 'center',
        }}
      >
        <div
          style={{
            width: 48,
            height: 48,
            lineHeight: '22px',
            backgroundSize: '100%',
            textAlign: 'center',
            padding: '8px 16px 16px 12px',
            color: '#FFF',
            fontWeight: 'bold',
            backgroundImage:
              "url('https://gw.alipayobjects.com/zos/bmw-prod/daaf8d50-8e6d-4251-905d-676a24ddfa12.svg')",
          }}
        >
          {index}
        </div>
        <div
          style={{
            fontSize: '16px',
            color: token.colorText,
            paddingBottom: 8,
          }}
        >
          {project.projectName}
        </div>
      </div>
      <div
        style={{
          fontSize: '14px',
          color: token.colorTextSecondary,
          textAlign: 'justify',
          lineHeight: '22px',
          marginBottom: 8,
        }}
      >
        {`这里是关于${project.projectName}的项目描述...`}
      </div>
      <a rel="noreferrer">
        <LearnMore project={project}/>
      </a>
    </div>
  );
};

interface Project {
  companyJia: string,
  companyYi: string,
  contract: string,
  contractTime: [string, string],
  department: string,
  mangerName: string,
  projectName: string,
  projectType: string,
  isSupervise: string
}

interface RecentProjectsProps {
  recentProjects: Project[]; // 根据实际情况决定是否设置为必填项，默认为可选
}

const RecentProjects: React.FC<RecentProjectsProps> = (props) => {
  const {token} = theme.useToken();
  const {initialState} = useModel('@@initialState');
  const projects = props.recentProjects || []; // 防止未传入 recentProjects 时导致报错

  return (
    <Card
      style={{
        borderRadius: 8,
      }}
      bodyStyle={{
        backgroundImage:
          initialState?.settings?.navTheme === 'realDark'
            ? 'background-image: linear-gradient(75deg, #1A1B1F 0%, #191C1F 100%)'
            : 'background-image: linear-gradient(75deg, #FBFDFF 0%, #F5F7FF 100%)',
      }}
    >
      <div
        style={{
          backgroundPosition: '100% -30%',
          backgroundRepeat: 'no-repeat',
          backgroundSize: '274px auto',
        }}
      >
        <div
          style={{
            fontSize: '20px',
            color: token.colorTextHeading,
          }}
        >
          <h5 style={{fontWeight: "bold"}}>最近创建的项目</h5>
        </div>

        <div
          style={{
            display: 'flex',
            flexWrap: 'wrap',
            gap: 16,
          }}
        >
          {projects.map((project: Project, index: any) => (
            <InfoCard
              key={index + 1}
              index={index + 1}
              project={project}
            />
          ))}
        </div>
      </div>
    </Card>
  );
};

export default RecentProjects;
